<template>
  <div>
    <p id="name" ref="n">{{name}}</p>
    <input type="button" value="修改name1" @click="name='lisi'">
    <input type="button" value="修改name2" @click="name='wsngwu'">
    <br>
    <input type="text" v-model="name" ref="a">
    <br>
    <ul v-if="jokes.length!=0">
        <li v-for="(joke,index) in jokes" :key="joke" >
            {{index}}:{{joke}}
        </li>
    </ul>

  </div>
</template>

<script>
import service from './utils/http'
export default {
  data(){
    return {
      name:"zhangsan",
      jokes:[],
      num:3
    }
  },
  methods:{
    sayhello(){
      console.log('say hello...')
    }
  },
  // vue的生命周期钩子函数，都是自动调用的，无需手动去调用
  // -------------------- 1.vue组件的创建阶段 只执行一次--------------------
  // beforeCreate执行：vue组件实例还没有实例化完成，此时获取不到组件中的属性和方法
  beforeCreate(){
    console.log('beforeCreate', this.name, this.sayhello)
  },
  // created执行：vue组件实例已经实例化完成（页面还没有渲染好），可以访问组件中的属性和方法
  created(){
    console.log('created', this.name, this.sayhello)
    service.get(`https://api-vue-base.itheima.net/api/joke/list?num=${this.num}`)
            .then(response => {
                    console.log(response);
                    console.log(response.data);
                    this.jokes = response.data
                })
            .catch(function(err){
                console.log(err)
            })
  },
  // beforeMount执行：template模版还没有渲染到页面中，获取不到DOM元素
  beforeMount(){
    console.log('beforeMount', this.name, this.sayhello)
    console.log('beforeMount', document.getElementById('name'), this.$refs.n)
  },
   //  mounted执行：template模版已经渲染到页面中，可以获取到DOM元素
  mounted(){
    console.log(' mounted', this.name, this.sayhello)
    console.log(' mounted', document.getElementById('name'), this.$refs.n)
  },

  // -------------------- 2.vue组件的运行和更新阶段 执行多次--------------------
  //beforeUpdate执行：数据源更新后，页面还没更新（获取不到最新页面）
  beforeUpdate(){
    console.log('beforeUpdate',this.$refs.a.value)
  },
  //updated执行：数据源更新后，页面更新（获取到最新页面）
  updated(){
    console.log('updated',this.$refs.a.value)
  }

  // -------------------- 3.vue组件的卸载阶段 执行多次--------------------
}
</script>

<style lang="less" scoped>

</style>
